<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="content_top">
        <h3 style="margin-left: 30px;font-size: 20px;">个人信息</h3>
      </div>
      <!-- 基础信息 -->
      <div class="content_middle">
        <p style="margin: 20px 0 0 40px;">个人信息</p>
        <el-form :model="staffsForm" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-villageForm">
          <div style="float: left;width: 200px;height: 200px;">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div style="float: left;width: 610px;height: 100%;">
            <el-form-item label="姓名" prop="staffName">
              <el-input v-model="staffsForm.staffName" style="width: 400px;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="微信">
              <el-input v-model="staffsForm.vchat" style="width: 400px;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="staffsForm.staffPhone" style="width: 400px;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="QQ">
              <el-input v-model="staffsForm.qchat" style="width: 400px;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="staffsForm.email" style="width: 400px;" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 账户信息 -->
      <div class="content_botton">
        <p style="margin: 20px 0 0 40px;">账户信息</p>
        <el-form :model="staffsForm" :rules="rules" ref="ruleForm"  label-width="100px" style="width: 610px;" class="demo-villageForm">
          <el-form-item label="账户">
            <el-input v-model="staffsForm.staffNumber" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="staffsForm.password" type="password" style="width: 400px;" placeholder="请输入"></el-input>
            <el-button type="text" @click="resetPassword" style="margin-left: 10px;">重置密码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="backspace">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueVillageAdd',

  data() {
    return {
      staffsForm: {
        id: '',
        staffName: '',
        staffPhone: '',
        vchat: '',
        qchat: '',
        email: '',
        staffNumber: '',
        password: '',
        staffImageUrl: ''
      },
      password: '',
      rules: {
        staffName: [
          { required: true, validator: this.validateTitle, trigger: 'blur' }
        ]
      },
      staffName: '',
      imageUrl: '',
      imageFile: File
    }
  },

  mounted() {
    this.listStaffsInfo()
  },

  methods: {
    listStaffsInfo(){
      this.$axios.get('/memberCjq/staffs/listStaffsInfo', {
        params: {
          id: JSON.parse(window.localStorage.getItem('user')).id
        }
      }).then(res => {
        if (res.status === 200) {
          this.staffsForm = res.data.obj.obj
          if(this.staffsForm.staffImageUrl !== null){
            this.imageUrl = this.staffsForm.staffImageUrl
            this.staffName = res.data.obj.obj.staffName
            this.password = res.data.obj.obj.password
          }
        }
      })
    },
    validateTitle (rules, value, callback) { // 判断用户名是否重复
      if (!value) {
        callback(new Error('请输入姓名'))
      } else {
        this.$axios.get('/memberCjq/staffs/listStaffName', {
          params: {
            staffName: value
          }
        }).then(res => {
          this.insertLog('员工姓名查重')
          if (value !== this.staffName) {
            if (res.data.obj.flag) {
              callback(new Error('登录名已重复!'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      }
    },
    submitForm(formName) { // 修改个人信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          const staffsForm = this.staffsForm
          for (const key in staffsForm) {
            if (staffsForm[key]) {
              formData.append(key, staffsForm[key])
            }
          }
          if (this.staffsForm.password !== this.password){
            formData.set('password', this.staffsForm.password)
          } else {
            formData.set('password', '')
          }
          if (this.imageFile.name !== 'File') {
            formData.set('file', this.imageFile, this.imageFile.name)
          }
          this.$axios.post('/memberCjq/staffs/saveStaffsInfo', formData).then(res => {
            if (res.data.flag){
              this.MyMessage('编辑成功!', 'success')
              this.insertLog('编辑个人信息')
              this.$router.go(0)
            } else {
              this.MyMessage('修改失败，请联系管理员', 'warning')
            }
          })
        } else {
          console.log('error submit!!')
          this.MyMessage('系统有误，请联系管理员!', 'error')
          return false
        }
      })
    },
    resetPassword(){ // 重置密码为123456
      this.$axios.delete('/memberCjq/staffs/resetPassword', {
        params: {
          id: this.staffsForm.id
        }
      }).then(res => {
        if (res.data.flag) {
          this.listStaffsInfo()
          this.MyMessage('密码重置为：123456', 'success')
        }
      })
    },
    backspace(){
      this.$router.go(-1)
    },
    beforeAvatarUpload(file) { // 设置图片上传格式
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/webp' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/WEBP/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
        return false
      }
      this.imageFile = file
      this.imageUrl = URL.createObjectURL(file)
      return false
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 900px;
  font-family: '微软雅黑';
  background: #F0F2F5;
}
.content{
  width: 1200px;
  margin: 0 auto;
  padding-top: 25px;
}
.content_top{
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  background: #FFF;
}
.content_middle{
  width: 100%;
  height: 450px;
  background: #FFF;
  overflow: hidden;
  margin-top: 20px;
}
.demo-villageForm{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px dashed #d9d9d9;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.content_botton{
  width: 1200px;
  height: 300px;
  margin-top: 20px;
  overflow: hidden;
  background: #FFF;
}
::v-deep(.el-upload--picture-card){
  width: 120px;
  height: 120px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item){
  width: 120px;
  height: 120px;
}
::v-deep(.el-icon-plus){
  position: relative;
  top:-7px;
}
</style>
